<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>员工管理</h3>
			<h4>工作记录</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<!--order-work-->
			<div class="order-work">
				<dl class="order-work-up">上班</dl>
				<dl class="order-work-down">下班</dl>
			</div>
			<!--/order-work-->
			<!--form-->
			<form action="#" class="layui-form">
				<div class="order-nav clearfix">
					<dl><input name="class_date" placeholder="请选择上班日期" class="layui-input" id="search_time" lay-key="1"></dl>
					<dl><input type="text" name="class_name"  placeholder="上班班次" autocomplete="off" class="layui-input"></dl>
	            	<div class="order-nav-search">
	            		<dl class="deer-btn" lay-submit lay-filter="Submit" >查询</dl>
	            		<dl class="deer-btns">复位</dl>
	            	</div>
				</div>
			</form>
			<section class="order-table">
				<table class="layui-table" lay-skin="line">
				  	<thead>
					    <tr>
					      	<th>上班班次</th>
					        <th>上班人数</th>
					        <th>上班时间</th>
					        <th>下班时间</th>
					        <th>销售情况</th>
					        <th>日期</th>
					    </tr> 
				  	</thead>
				  	<tbody>
				     	<tr>
				     		<td>1</td>
				     		<td>2</td>
				     		<td>2018-02-06 10:40:28</td>
				     		<td>未下班</td>
				     		<td><a href="#">查看销售</a></td>
				     		<td>2018-02-06</td>
				     	</tr>
				     	<tr>
				     		<td>1</td>
				     		<td>2</td>
				     		<td>2018-02-06 10:40:28</td>
				     		<td>未下班</td>
				     		<td><a href="#">查看销售</a></td>
				     		<td>2018-02-06</td>
				     	</tr>
				     	<tr>
				     		<td>1</td>
				     		<td>2</td>
				     		<td>2018-02-06 10:40:28</td>
				     		<td>未下班</td>
				     		<td><a href="#">查看销售</a></td>
				     		<td>2018-02-06</td>
				     	</tr>
				     	<tr>
				     		<td>1</td>
				     		<td>2</td>
				     		<td>2018-02-06 10:40:28</td>
				     		<td>未下班</td>
				     		<td><a href="#">查看销售</a></td>
				     		<td>2018-02-06</td>
				     	</tr>
				     	<tr>
				     		<td>1</td>
				     		<td>2</td>
				     		<td>2018-02-06 10:40:28</td>
				     		<td>未下班</td>
				     		<td><a href="#">查看销售</a></td>
				     		<td>2018-02-06</td>
				     	</tr>
				  	</tbody>
				</table>
				<div class="order-table-footer clearfix">
					<div class="order-table-page">
						<div id="datatime">
							
						</div>
					</div>
				</div>
				
			</section>
		</div>
		<!--deer-content-->
	</section>
	
	<!--js-->
	<aside>
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			layui.use(['laydate','laypage','jquery','form','layer'], function(){
			  	var laydate=layui.laydata;
			  	var laypage=layui.laypage;
			  	var $=layui.jquery;
			  	var form=layui.form;
			  	var layer=layui.layer;
			  	
			  	laydate=layui.laydate;
					laydate.render({
			        elem: '#search_time' //指定元素
			    })
					
			    laypage.render({
				    elem: 'datatime'
				    ,count: 100//data.length
				    ,theme: '#00cc9a'
			    	,prev: '«'
			    	,next: '»'
			  	})
			    
			   $('.order-work>dl').eq(0).bind('click',function(){
			   	if( $('.order-work>dl').eq(0).text()=='上班中...'){
			   		layer.msg('您已经上班了哦，无须重复操作', {icon: 2});
			   	}else{
			        layer.open({
			            type: 2,
			            area: ['500px', '440px'],
			            title: '员工上班',
			            shade: 0.6,//遮罩透明度
			            anim: 0,//0-6的动画形式，-1不开启
			            shadeClose: true, //点击遮罩关闭
			            content: '员工管理-工作记录-上班.html'
			    	})
			        $('.order-work>dl').eq(0).text('上班中...')
			   	}
			   })
			    
			    
			    
			    	 $('.order-work>dl').eq(1).bind('click',function(){
			    	 	
			    	 	if($('.order-work>dl').eq(0).text()=='上班中...'){
			    	 		layer.confirm('您确定要下班吗？',{
				     			btn:['是的','没有']
				     		},function(){
				     			//上班操作
				     			$('.order-work>dl').eq(0).text('上班')
				     			layer.msg('下班成功', {icon: 1})
				     		},function(){
				     			layer.msg('您取消了操作', {icon: 0});
				     		})
			    	 	}else{
			    	 		//下班操作
			    	 		layer.msg('您现在还有没上班，是不可以下班的哦', {icon: 2});
			    	 	}
			    	 	
			     		
			     	})
			    
			    
			    form.on('submit(Submit)', function(data){
					console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					
					$.ajax({
			            url: '/',
			            data: data.field,
			            type: 'post',
			            datatype: 'json',
			            success: function (res) {
			                if (res.code == 1) {
			                	
			                	layer.msg(res.msg);
			                    return;
			                }
				            }
				        });
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				})
			    
			    
			    
			})
			</script>
		</script>
	</aside>
	<!--js-->
	
	
	
</body>
</html>